@using BlazorSortableList.DemoApp.Client.Models

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Disabling Sorting</h1>
    <p class="mb-4">You can disable sorting with the `Sort` option set to `false`. You can also disable dropping items on a list by setting the `Put` to `false`. In the example below, <br>
        you can drag from list 1 to list 2, but not from list 2 to list 1. You can sort list 2, but not list 1.</p>

    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column">
                    <SortableList Id="disabledOne" Group="disabledSorting" Pull="clone" Put="false" Sort="false" Items="items1" Context="item" OnRemove="ListOneRemove">
                        <SortableItemTemplate>
                            <div class="card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="disabledTwo" Group="disabledSorting" Pull="clone" Items="items2" Context="item" OnUpdate="SortList">
                        <SortableItemTemplate>
                            <div class="card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column">
                    <SortableList Id="@ListId1" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-light has-background-blazor1">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="@ListId2" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-light has-background-blazor1">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>                  
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent2</pre>
        </TabPage>
        
    </TabControl>
</div>

@code {
    private const string ListId1 = "SharedListDisSorting1";
    private const string ListId2 = "SharedListDisSortingId2";
    private const string GroupId = "CommonGroupDisSorting";

    private string codeContent1 = @"
        <SortableList Id=""disabledOne"" Group=""disabledSorting"" Pull=""clone"" Put=""false"" Sort=""false"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
            <SortableItemTemplate>
                <div class=""card has-border has-background-blazor has-text-white"">
                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
                </div>
            </SortableItemTemplate>
        </SortableList>
    
        <SortableList Id=""disabledTwo"" Group=""disabledSorting"" Pull=""clone"" Items=""items2"" Context=""item"" OnUpdate=""SortList"">
            <SortableItemTemplate>
                <div class="" card has-border has-background-blazor has-text-white"">
                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>

                </div>
            </SortableItemTemplate>
        </SortableList>

        @code {
            private void ListOneRemove((int oldIndex, int newIndex) indices)
            {
                var item = items1[indices.oldIndex];

                var clone = item;

                items2.Insert(indices.newIndex, clone);
            }

            private void SortList((int oldIndex, int newIndex) indices)
            {
                // deconstruct the tuple
                var (oldIndex, newIndex) = indices;

                var items = this.items2;
                var itemToMove = items[oldIndex];
                items.RemoveAt(oldIndex);

                if (newIndex < items2.Count)
                {
                    items.Insert(newIndex, itemToMove);
                }
                else
                {
                    items.Add(itemToMove);
                }

                StateHasChanged();
            }
        }";

    private string codeContent2 = @"
    <SortableList Id=""@ListId1"" GroupModel=""@_group"" Context=""item"">
       <SortableItemTemplate>
           <div class="" card has-border-light has-background-blazor1"">
                 <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
           </div>
       </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""@ListId2"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class="" card has-border-light has-background-blazor1"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    @code {
        private const string ListId1 = ""SharedListDisSorting1"";
        private const string ListId2 = ""SharedListDisSortingId2"";
        private const string GroupId = ""CommonGroupDisSorting"";

        public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        DisableSortingListGroup _group;

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            SortableListSettings settings1 = new SortableListSettings() { CloneMode = true, AllowDrop = false, AllowReorder = false };
            SortableListSettings settings2 = new SortableListSettings() { CloneMode = true };

            _group = new DisableSortingListGroup(ListId1, ListId2, () => StateHasChanged());
            _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings1 });
            _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings2 });
        }
    }
    ";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    DisableSortingListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        SortableListSettings settings1 = new SortableListSettings() { CloneMode = true, AllowDrop = false, AllowReorder = false };
        SortableListSettings settings2 = new SortableListSettings() { CloneMode = true };

        _group = new DisableSortingListGroup(() => StateHasChanged());
        _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings1 });
        _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings2 });
    }

    private void ListOneRemove((int oldIndex, int newIndex) indices)
    {
        var item = items1[indices.oldIndex];

        var clone = item;

        items2.Insert(indices.newIndex, clone);
    }

    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items2;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items2.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }

}